/*
 * @Author: wufeixing
 * @Date: 2018-10-12 14:13:56
 * @Last Modified by: yuechenglin
 * @Last Modified time: 2018-12-06 14:33:59
 */

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(factory)
  } else if (typeof exports === 'object') {
    module.exports = factory()
  } else if (root === window) {
    root.Poster = factory()
  } else {
    Object.assign(root, factory())
  }
})(this, function () {
  /**
   *
   * @param {string} image
   * background image src
   * @param {Array} items
   * list of draw items
   * text: { text: '', pos: {x: 0, y: 0}, [color], [fontFamily], [fontSize], [zIndex]}
   * image: { image: 'src', pos: {x: 0, y: 0}, circle: false, [width], [height], [zIndex]}
   * @return {Promise}
   */
  function generate (image, items) {
    var that = this
    return new Promise(function (resolve, reject) {
      var pros = []
      pros.push(loadImage(image, {}))
      items.forEach(function (item) {
        item.zIndex = item.zIndex || 0
        if (item.image) {
          pros.push(loadImage(item.image, item))
        }
      })
      Promise.all(pros).then(function (result) {
        resolve(_generate.call(that, result[0], items))
      })
    })
  }

  function loadImage (src, item) {
    return new Promise(function (resolve, reject) {
      if (src instanceof Image) {
        resolve(src)
      }
      var image = new Image()
      image.setAttribute('crossOrigin', 'Anonymous')
      image.src = src
      image.onload = function () {
        item.image = image
        resolve(image)
      }
      image.onerror = function () {
        reject()
      }
    })
  }

  function _generate (image, items) {
    var canvas = document.createElement('canvas')
    canvas.width = image.width
    canvas.height = image.height
    var t = canvas.width / 340

    var ctx = canvas.getContext('2d')
    ctx.drawImage(image, 0, 0, image.width, image.height)

    var defaults = this.defaults

    items.sort(function (x, y) {
      return x.zIndex - y.zIndex
    })

    items.forEach(function (item) {
      var x = item.pos.x * t; var y = item.pos.y * t
      if (item.text) {
        ctx.fillStyle = item.color || defaults.color
        ctx.font = Math.round((item.fontSize || defaults.fontSize) * t) + 'px ' + (item.fontFamily || defaults.fontFamily)
        ctx.fillText(item.text, x, y)
      } else {
        var width = item.width; var height = item.height
        if (width && height) {
          width *= t
          height *= t
          if (item.circle) {
            var r = Math.round(width / 2)
            var cx = x + r
            var cy = y + r
            ctx.save()
            ctx.beginPath()
            ctx.arc(cx, cy, r, 0, 2 * Math.PI)
            ctx.clip()
          }
          ctx.drawImage(item.image, x, y, width, height)
        } else {
          ctx.drawImage(item.image, x, y)
        }
      }
    })

    return canvas.toDataURL('image/png')
  }

  return {
    generate: generate,
    defaults: {
      color: '#000',
      fontSize: 14,
      fontFamily: 'Georgia'
    }
  }
})
